import React from 'react';
import { Card, List, Tag, Button, Tooltip, Collapse } from 'antd';
import { StarOutlined, ShareAltOutlined, EyeOutlined } from '@ant-design/icons';

const cases = [
  {
    id: 1,
    title: 'AI辅助诊断平台',
    industry: '医疗健康',
    color: '#ff7875',
    desc: '基于大模型的医学影像辅助诊断平台，提升医生诊断效率和准确率。',
    detail: '该平台集成了多种AI算法，支持多模态医学影像分析，已在多家三甲医院落地应用。',
    collected: false
  },
  {
    id: 2,
    title: '智能风控系统',
    industry: '金融科技',
    color: '#36cfc9',
    desc: 'AI驱动的金融风控系统，实时监测交易风险，防范欺诈。',
    detail: '系统采用深度学习模型，结合大数据分析，实现对异常交易的高效识别和预警。',
    collected: true
  },
  {
    id: 3,
    title: '智能质检机器人',
    industry: '智能制造',
    color: '#40a9ff',
    desc: '应用于制造业的AI质检机器人，自动识别产品缺陷。',
    detail: '机器人配备高精度摄像头和AI算法，支持多种产品的自动化检测。',
    collected: false
  }
];

const { Panel } = Collapse;

const CaseList: React.FC = () => {
  return (
    <Card title={<span style={{ fontWeight: 600, fontSize: 18 }}>应用案例</span>} bordered={false} style={{ background: '#fff', borderRadius: 16 }}>
      <List
        itemLayout="vertical"
        dataSource={cases}
        renderItem={item => (
          <List.Item style={{ marginBottom: 16 }}>
            <Card
              style={{ borderLeft: `8px solid ${item.color}`, borderRadius: 12, background: '#f6faff' }}
              title={<span style={{ fontWeight: 600 }}>{item.title}</span>}
              extra={<Tag color={item.color}>{item.industry}</Tag>}
              actions={[
                <Tooltip title={item.collected ? '已收藏' : '收藏'}>
                  <Button type={item.collected ? 'primary' : 'default'} shape="circle" icon={<StarOutlined />} />
                </Tooltip>,
                <Tooltip title="分享">
                  <Button shape="circle" icon={<ShareAltOutlined />} />
                </Tooltip>,
                <Tooltip title="展开详情">
                  <Button shape="circle" icon={<EyeOutlined />} />
                </Tooltip>
              ]}
            >
              <div style={{ color: '#555', marginBottom: 8 }}>{item.desc}</div>
              <Collapse ghost>
                <Panel header="点击展开详情" key="1">
                  <div style={{ color: '#888' }}>{item.detail}</div>
                </Panel>
              </Collapse>
            </Card>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default CaseList; 